<template>
  <div>
   <div v-show="$route.path=='/classify'">
        <div class="top">
        <h4>文章分类</h4>
    </div>
    <router-link to="/home" class="return"><span class="iconfont">&#xe669;</span>返回首页</router-link>
<div class="w4">
    <div class="box">
        <router-link to="/classify/c"><img src="../assets/images/29.png"></router-link>
        <p>C语言</p>
    </div>
    <div class="box">
        <router-link to="/classify/qianduan"><img src="../assets/images/33.png"></router-link>
        <p>前端学习</p>
    </div>
    <div class="box">
        <router-link to="/classify/xuexi"><img src="../assets/images/32.png"></router-link>
        <p>学习计划</p>
    </div>
    <div class="box">
        <router-link to="/classify/shiyong"><img src="../assets/images/34.png"></router-link>
        <p>实用技术</p>
    </div>
    <div class="box">
        <router-link to="/classify/kaifa"><img src="../assets/images/37.png"></router-link>
        <p>开发基础</p>
    </div>
    <div class="box">
        <router-link to="/classify/wei"><img src="../assets/images/36.png"></router-link>
        <p>微服务核心</p>
    </div>
    <div class="box">
        <router-link to="/classify/lishi"><img src="../assets/images/38.png"></router-link>
        <p>日本历史</p>
    </div>
    <div class="box">
        <router-link to="/classify/riben"><img src="../assets/images/39.png"></router-link>
        <p>日本流行音乐史</p>
    </div>
</div>
   </div>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: "Classify",
}
</script>

<style scoped>
      .top {
    height: 420px;
    background-image: url("../assets/images/8.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-top: 160px;
}

.top h4 {
    /* margin-top: 160px; */
    text-align: center;
    font-size: 50px;
    color: white;
}
.w4 {
    border: 1px solid rgb(179, 177, 177);
    margin: 50px auto; 
    width: 1000px;
    height: 1440px;
    border-radius: 2%;
    box-shadow: -5px -5px 16px rgb(222, 221, 221);
}
.w4 p{
    margin-top: 20px;
    text-align: center;
    font-size: 40px;
    color: black;
}
.box{
    float: left;
}
img{
    width: 430px;
    height: 250px;
    margin-top: 40px;
    margin-left: 45px;
    border-radius: 2%;
    filter: brightness(40%);
}
.box p{
    font-size: 25px;
}
.w4 img:hover{
    filter: brightness(100%);
}
.return{
    position: absolute;
    color: rgb(199, 119, 119);
    font-size: 25px;
    left: 84px;
    top: 60px;
    border: 2px solid rgb(199, 119, 119);
}
.return:hover{
    background-color: rgb(230, 199, 199);
}
.return span{
    font-size: 22px;
}
 /* 图片经过放大 */
 img{
    overflow: hidden;
    transition: all 0.8s;
  }
  img:hover{
    transform: scale(1.1)
  }
</style>